<template>
  <div class="hotelOption">
    <div class="searchOption">
      <el-row class="area" type="flex" v-if="areaInfo">
        <el-col :span="3">区域：</el-col>
        <el-col :span="24" :class="{showAll:flag}">
          <div class="areaBox">
            <span v-for="item in areaInfo.scenics" :key="item.id">{{item.name}}</span>
          </div>
          <a href="javascript:;" @click="flag= !flag">
            <i class="el-icon-d-arrow-right"></i>
            等{{areaInfo.scenics.length}}个区域
          </a>
        </el-col>
      </el-row>
      <el-row class="price" type="flex">
        <el-col :span="3">
          区域
          <el-tooltip effect="dark" content="等级均价由平日价格计算得出，节假日价格会有上浮。" placement="top-start">
            <span class="mask">?</span>
          </el-tooltip>：
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="8">
              <i class="iconfont icon-huangguanguanjun"></i>
              <i class="iconfont icon-huangguanguanjun"></i>
              <i class="iconfont icon-huangguanguanjun"></i>
              <span>￥233</span>
            </el-col>
            <el-col :span="8">
              <i class="iconfont icon-huangguanguanjun"></i>
              <i class="iconfont icon-huangguanguanjun"></i>
              <i class="iconfont icon-huangguanguanjun"></i>
              <span>￥233</span>
            </el-col>
            <el-col :span="8">
              <i class="iconfont icon-huangguanguanjun"></i>
              <i class="iconfont icon-huangguanguanjun"></i>
              <i class="iconfont icon-huangguanguanjun"></i>
              <span>￥233</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div id="mapBox">
      <div id="Map"></div>
      <img class="loading" v-if="loading" src="@/assets/loading.gif" alt />
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      areaInfo: null,
      flag: true,
      map: {},
      loading: true,
    };
  },
  watch: {
    "$store.state.hotel.positionCity": {
      handler() {
        if (this.$store.state.hotel.positionCity) {
          this.getArea();
        }
      },
      immediate: true,
    },
    data() {
      this.loading = true;
      this.createMap();
    },
  },
  methods: {
    //获取区域信息
    getArea() {
      this.$axios({
        url: "/cities",
        params: {
          name: this.$store.state.hotel.positionCity,
        },
      }).then((res) => {
        this.areaInfo = res.data.data[0];
        this.$emit("sendId", [{ city: res.data.data[0].id }]);
      });
    },
    createMap() {
      window.onLoad = () => {
        this.map = new AMap.Map("Map");
        this.setMarker();
      };
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=681b24441863bb138a7af5f3f231821b&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },
    setMarker() {
      var markers = this.data.map((item, index) => {
        var marker = new AMap.Marker({
          title: item.name,
          position: [item.location.longitude, item.location.latitude],
          content: "<span class='pointMarker'>" + (index + 1) + "</span>",
        });
        var infoWindow = null;
        //移入打开信息框
        marker.on("mouseover", () => {
          marker.setTop(true);
          infoWindow = new AMap.InfoWindow({
            content: `<span style="font-size: 12px;color: #333">${marker.getTitle()}</span>`,
            offset: new AMap.Pixel(0, -32),
          });
          infoWindow.open(this.map, marker.getPosition());
        });
        //移除关闭信息框
        marker.on("mouseout", () => {
          infoWindow.close();
        });

        return marker;
      });
      this.map.add(markers);
      this.map.setFitView();
      this.loading = false;
    },
  },
};
</script>

<style lang="less" scoped>
.hotelOption {
  display: flex;
  margin-bottom: 40px;
  .searchOption {
    flex: 1.5;
    margin-right: 10px;
    font-size: 14px;
    color: #666;
    .area {
      margin-bottom: 20px;
      span {
        margin-right: 10px;
        cursor: default;
      }
      .showAll {
        .areaBox {
          max-height: 40px;
          overflow: hidden;
        }
        i {
          transform: rotate(90deg);
        }
      }
      a {
        color: #666;
        margin-top: 10px;
        i {
          color: #ffa500;
          transform: rotate(-90deg);
        }
      }
    }
    .price {
      .mask {
        display: inline-block;
        font-size: 12px;
        width: 15px;
        height: 15px;
        background: #ccc;
        line-height: 15px;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        cursor: default;
      }
      i {
        color: #ffa500;
      }
    }
  }
  #mapBox {
    flex: 1;
    height: 260px;
    background: #ccc;
    position: relative;
    #Map {
      height: 100%;
    }
    .loading {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 999;
      opacity: 0.5;
    }
    /deep/.pointMarker {
      display: inline-block;
      width: 22px;
      height: 36px;
      background-image: url(https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png);
      background-size: 22px 36px;
      text-align: center;
      line-height: 24px;
      color: #fff;
    }
  }
}
</style>